themes: scale down icons for network interfaces
authorDávid Benko <[email protected]>
Sat, 23 Aug 2025 16:00:33 +0000 (18:00 +0200)
committerPaul Donald <[email protected]>
Mon, 29 Sep 2025 15:25:45 +0000 (17:25 +0200)
Many LuCI icons doubled in size during migration to vector graphics
in commit ae5d91da903b6f1d3086d6082ca622231e34f555 (16px to 32px).

Sizing of their instances is mostly controlled by CSS, but there's
an exception - network interface boxes of "Interfaces" page in LuCI.
Current CSS doesn't specify any particular size requirements to follow,
so the icons just scale with the images served, thus effectively
doubling in width and height compared to state before the vectorization
commit. Such a big icons look odd and take up too much space, especially
for bridge interfaces with many ports.

Instead of reverting to the original 16×16px, this commit proposes
compromise of 24×24px as most of other icons within LuCI became a bit
bigger as well.

Signed-off-by: Dávid Benko <[email protected]>
themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css
themes/luci-theme-material/htdocs/luci-static/material/cascade.css
themes/luci-theme-openwrt-2020/htdocs/luci-static/openwrt2020/cascade.css
themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/cascade.css

index 8ab413f11f1d842294cc6890ee24e68c68fca6ea..6ab19035cea5c7fdf03de89601a00acb324d3037 100644 (file)
@@ -2188,6 +2188,11 @@ th[data-sort-direction="desc"]::after { content: "\a0\25bc"; }
        white-space: normal;
 }
 
+#cbi-network-interface .ifacebox img {
+       width: 24px;
+       height: 24px;
+}
+
 .ifacebadge {
        display: inline-block;
        flex-direction: row;
index d100a06442b803d99b6b0b5220096421f79f7302..338d7b4fb39c880bd29a12b00db8f55a3f18ec65 100644 (file)
@@ -2084,6 +2084,11 @@ td > .ifacebadge,
        padding: .25em;
 }
 
+#cbi-network-interface .ifacebox img {
+       width: 24px;
+       height: 24px;
+}
+
 .cbi-image-button {
        margin-left: .5rem;
 }
index 5dcda6efc6f662cb8098f0b65db4ebe7cd573971..cd8fef6a2741e6dc53c8f8c72dc1eccb179ab29e 100644 (file)
@@ -704,6 +704,11 @@ p > a {
        white-space: nowrap;
 }
 
+#cbi-network-interface .ifacebox img {
+       width: 24px;
+       height: 24px;
+}
+
 .ifacebadge {
        display: inline-flex;
        align-items: center;
index 3f8235068e284d5098717ce15256bf494b34dfc4..34896af979d4ec30f8acc74a5f77b057058d6ba6 100644 (file)
@@ -1653,6 +1653,11 @@ select + .cbi-button {
        min-width: 35%;
 }
 
+#cbi-network-interface .ifacebox img {
+       width: 24px;
+       height: 24px;
+}
+
 
 .zonebadge {
        padding: 2px;